<template>
  <div id="app">
      <transition name='fade' mode='out-in' >
        <keep-alive v-if="isRouterAlive">
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>

    <transition name='fade' mode='out-in' v-if="isRouterAlive">
      <router-view v-if="!$route.meta.keepAlive" ></router-view>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive:true,
    };
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false
      this.$nextTick(()=>{
        this.isRouterAlive=true
      })
    },
  }
}
</script>
<style lang='less'>
html,
body {
  font-family: PingFangSC-Regular, sans-serif;
  max-width: 640px;
  margin: 0 auto;
  #app {
    padding-bottom: 0;
    padding-top: 0.88rem;
  }
  .weui-tabbar {
    position: fixed;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .1s ease-in;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

font[size='1'] {
  font-size: 13px;
}

font[size='2'] {
  font-size: 15px;
}

font[size='3'] {
  font-size: 16px;
}

font[size='4'] {
  font-size: 18px;
}

font[size='5'] {
  font-size: 20px;
}

font[size='6'] {
  font-size: 24px;
}

font[size='7'] {
  font-size: 32px;
}
</style>

